<template>
  <div>
    <van-tabs :active="activeIndex" @change="tabClick" color="#f8c400" :border="false">
      <div v-for="(item, index) in listCategory" :key="index">
        <van-tab :title="item.categoryName" title-style="font-size:32rpx;"></van-tab>
      </div>
    </van-tabs>
  </div>
</template>

<script>
import { listOneGoodsCategory } from '@/api/distribution'
export default {
  data() {
    return {
      isComponents: true,
      listCategory: []
    }
  },
  props: {
    activeIndex: {
      type: Number,
      default: 0
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  mounted() {
    // 组件第一次没有onShow，所以用mounted初始化
    this.initListCategory()
  },
  onShow() {
    this.initListCategory()
  },
  methods: {
    initListCategory() {
      listOneGoodsCategory({
        memberId: this.getMemberId,
        seachType: 0
      }).then((response) => {
        console.log(response)
        if (response.isError) return
        this.listCategory = response.data
        // 当前超过数组长度
        if (this.activeIndex > this.listCategory.length - 1) {
          this.activeIndex = 0
        }
        if (this.listCategory.length > 0) {
          this.setCategoryId()
        }
      }).catch(() => {
      })
    },
    tabClick(e) {
      this.activeIndex = e.mp.detail.index
      this.setCategoryId()
    },
    setCategoryId() {
      let categoryId = ''
      let categoryType = ''
      if (this.listCategory.length > 0) {
        categoryId = this.listCategory[this.activeIndex].categoryId
        categoryType = this.listCategory[this.activeIndex].categoryType
      }
      this.$emit('tabClick', categoryId, categoryType, this.activeIndex)
    }
  }
}
</script>

<style scoped>
</style>
